85:I[903690,["/chat-static/_next/static/immutable/chunks/04hbfmh6hbqss.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/2e3p8j58j-2ac.js","/chat-static/_next/static/immutable/chunks/2ozwdzttq5i1f.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/3ishjhw9r5hu6.js","/chat-static/_next/static/immutable/chunks/219cqn3u0bpkg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0xi2c3jaocjvt.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/39g-v5gn16xpu.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2lb8tgn9smhmm.js","/chat-static/_next/static/immutable/chunks/1ybmqoirdq34w.js","/chat-static/_next/static/immutable/chunks/1erg8g21a3w0b.js","/chat-static/_next/static/immutable/chunks/1_qpltudrcx39.js","/chat-static/_next/static/immutable/chunks/3h0z-hp8-yi1i.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/12iw2o65f5diw.js","/chat-static/_next/static/immutable/chunks/3fnbcspmxidog.js","/chat-static/_next/static/immutable/chunks/0qmfntxs_4897.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3cyqm8u9n5jqw.js","/chat-static/_next/static/immutable/chunks/25bs_fkkq5ymp.js","/chat-static/_next/static/immutable/chunks/21e0q2tppm01j.js"],"ExplicitChatIdProvider"] 86:I[838238,["/chat-static/_next/static/immutable/chunks/04hbfmh6hbqss.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/2e3p8j58j-2ac.js","/chat-static/_next/static/immutable/chunks/2ozwdzttq5i1f.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/3ishjhw9r5hu6.js","/chat-static/_next/static/immutable/chunks/219cqn3u0bpkg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0xi2c3jaocjvt.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/39g-v5gn16xpu.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2lb8tgn9smhmm.js","/chat-static/_next/static/immutable/chunks/1ybmqoirdq34w.js","/chat-static/_next/static/immutable/chunks/1erg8g21a3w0b.js","/chat-static/_next/static/immutable/chunks/1_qpltudrcx39.js","/chat-static/_next/static/immutable/chunks/3h0z-hp8-yi1i.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/12iw2o65f5diw.js","/chat-static/_next/static/immutable/chunks/3fnbcspmxidog.js","/chat-static/_next/static/immutable/chunks/0qmfntxs_4897.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3cyqm8u9n5jqw.js","/chat-static/_next/static/immutable/chunks/25bs_fkkq5ymp.js","/chat-static/_next/static/immutable/chunks/21e0q2tppm01j.js"],"SWRDataProvider"] 87:T131c,[V0_FILE]typescriptreact:file="components/terminal-demo.tsx" import { AnimatedSpan, Terminal, TypingAnimation } from "@/components/magicui/terminal" export default function TerminalDemo() { return ( > pnpm dlx shadcn@latest init ✔ Preflight checks. ✔ Verifying framework. Found Next.js. ✔ Validating Tailwind CSS. ✔ Validating import alias. ✔ Writing components.json. ✔ Checking registry. ✔ Updating tailwind.config.ts ✔ Updating app/globals.css ✔ Installing dependencies. ℹ Updated 1 file: - lib/utils.ts Success! Project initialization completed. You may now add components. ) } [V0_FILE]typescriptreact:file="components/magicui/terminal.tsx" "use client" import { cn } from "@/lib/utils" import { motion, type MotionProps } from "motion/react" import { useEffect, useRef, useState } from "react" interface AnimatedSpanProps extends MotionProps { children: React.ReactNode delay?: number className?: string } export const AnimatedSpan = ({ children, delay = 0, className, ...props }: AnimatedSpanProps) => ( {children} ) interface TypingAnimationProps extends MotionProps { children: string className?: string duration?: number delay?: number as?: React.ElementType } export const TypingAnimation = ({ children, className, duration = 60, delay = 0, as: Component = "span", ...props }: TypingAnimationProps) => { if (typeof children !== "string") { throw new Error("TypingAnimation: children must be a string. Received:") } const MotionComponent = motion.create(Component, { forwardMotionProps: true, }) const [displayedText, setDisplayedText] = useState("") const [started, setStarted] = useState(false) const elementRef = useRef(null) useEffect(() => { const startTimeout = setTimeout(() => { setStarted(true) }, delay) return () => clearTimeout(startTimeout) }, [delay]) useEffect(() => { if (!started) return let i = 0 const typingEffect = setInterval(() => { if (i < children.length) { setDisplayedText(children.substring(0, i + 1)) i++ } else { clearInterval(typingEffect) } }, duration) return () => { clearInterval(typingEffect) } }, [children, duration, started]) return ( {displayedText} ) } interface TerminalProps { children: React.ReactNode className?: string } export const Terminal = ({ children, className }: TerminalProps) => { return (

        {children}

) } 7c:["$","$L85",null,{"chatId":"zWcwWVkYNEM","children":["$","$L86",null,{"data":{"@\"active-block\",\"zWcwWVkYNEM\",":{"id":"b_Brxom90SGD8","messageId":"IBfCAuRgH4kMmzJGUlaIP4ghCLiJ6tnM","source":"$87","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Terminal Demo","type":"code-project","project":"Terminal Demo"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"zWcwWVkYNEM\",":false,"":null},"children":"$L88"}]}]

About

Tags

Share

About

Tags

Share

More from dillion

More Templates Like This